<template>
  <div>
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>
  
<script>
import videojs from 'video.js';
import Vue from 'vue';

export default {
  name: 'VideoPlayer',
  props: {
    options: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      player: null
    }
  },
  watch: {
    // 监听options对象的变化
    options: {
      deep: true, // 深度监听，可以监听到对象内部属性的变化
      handler(newVal, oldVal) {
        // 当options变化时，执行这个函数
        // 这里可以更新player的配置
        // console.log("父子组件props参数----旧旧旧数据：")
        // console.log(oldVal)
        // console.log("父子组件props参数----新数据：")
        // console.log(newVal)
        // Vue.set(this.player.cache_.source, {
        //   src: this.options.sources[0].src,
        //   type: 'video/mp4'
        // });
        // Vue.set(this.player.cache_.sources, 0, {
        //   src: this.options.sources[0].src,
        //   type: 'video/mp4'
        // });
        this.player = videojs(this.$refs.videoPlayer, this.options, () => {
          this.player.log('onPlayerReady', this);
        });
      }
    }
  },
  mounted() {
    // this.player = videojs(this.$refs.videoPlayer, this.options, () => {
    //   this.player.log('onPlayerReady', this);
    // });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
}
</script>